import React from 'react';
import JSC3D from '../vendor/jsc3d';
import uiStore from '../store/uiStore';

export default class ThreeD extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      viewer: null,
    };
  }

  componentDidMount() {
      var canvas = this._canvas;
      var dSize = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
      canvas.width = dSize;
      canvas.height = dSize;

      this.state.viewer = new JSC3D.Viewer(canvas);

      uiStore._update3Dmodel = () => {
        this.state.viewer.setParameter('SceneUrl', '/models/demo.stl');
        this.state.viewer.setParameter('InitRotationZ', 0);
        this.state.viewer.setParameter('ModelColor', '#CAA618');
        this.state.viewer.setParameter('BackgroundColor1', '#FFFFFF');
        this.state.viewer.setParameter('BackgroundColor2', '#383840');
        this.state.viewer.setParameter('RenderMode', 'textureflat');
        //this.state.viewer.setParameter('RenderMode', 'wireframe');

        this.state.viewer.setParameter('ModelColor', '#708090');
        this.state.viewer.setParameter('BackgroundColor1', '#A1A1B8');
        this.state.viewer.setParameter('BackgroundColor2', '#737397');
        this.state.viewer.setParameter('RenderMode', 'smooth');
        this.state.viewer.setParameter('Definition', 'standard');
        //this.state.viewer.setParameter('Definition', 'high');
        this.state.viewer.setParameter('FaceCulling', 'off');
        this.state.viewer.setParameter('CreaseAngle', '20');
        this.state.viewer.setParameter('MipMapping', 'on');
        this.state.viewer.setParameter('Renderer', 'webgl');
        this.state.viewer.init();
        //this.state.viewer.setMouseUsage('pan');
        this.state.viewer.update();
      };

    const update3Dmodel = uiStore._update3Dmodel;
    update3Dmodel();

    // Add a bounding box immediately after the scene has been loaded.
    /* this.state.viewer.onloadingcomplete = () => {
     *   var scene = null;
     *   if (this.state.viewer) {
     *     scene = this.state.viewer.getScene();
     *   }
     *   if(!scene)
     *     return;
     *   makeBoundingBox(scene, 0xffffff);
     *   this.state.viewer.rotate(-90, 0, 0);
     *   this.state.viewer.rotate(0, 25, 0);
     *   this.state.viewer.rotate(25, 0, 0);
     *   this.state.viewer.update();
     * };
     */
    window.addEventListener("resize", () => {
      var dSize = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
      canvas.width = dSize;
      canvas.height = dSize;
      this.state.viewer.update();
    });

    /*
     * Create and add bounding box of the scene.
     */
    function makeBoundingBox(scene, color) {
      var bbox = new JSC3D.Mesh('bbox');
      bbox.vertexBuffer = [
        scene.aabb.minX, scene.aabb.minY, scene.aabb.minZ,
        scene.aabb.maxX, scene.aabb.minY, scene.aabb.minZ,
        scene.aabb.maxX, scene.aabb.maxY, scene.aabb.minZ,
        scene.aabb.minX, scene.aabb.maxY, scene.aabb.minZ,
        scene.aabb.minX, scene.aabb.minY, scene.aabb.maxZ,
        scene.aabb.maxX, scene.aabb.minY, scene.aabb.maxZ,
        scene.aabb.maxX, scene.aabb.maxY, scene.aabb.maxZ,
        scene.aabb.minX, scene.aabb.maxY, scene.aabb.maxZ,
      ];
      bbox.indexBuffer = [
        0, 3, 2, 1, -1,
        0, 4, 7, 3, -1,
        3, 7, 6, 2, -1,
        0, 1, 5, 4, -1,
        5, 1, 2, 6, -1,
        4, 5, 6, 7, -1
      ];
      bbox.isDoubleSided = true;
      bbox.init();

      bbox.setRenderMode('wireframe');
      bbox.setMaterial(new JSC3D.Material('bbox-mat', 0, color, 0));

      scene.addChild(bbox);
    }

    //view type: 0:top; 1:bottom; 2:left; 3:right; 4:front; 5:back; 6:iso
    function updateView( viewtype ) {
      this.state.viewer.resetScene();
      if (viewtype == 0) {
        this.state.viewer.resetScene();
      }
      else if (viewtype == 1) {
        this.state.viewer.rotate(180, 0, 0);
      }
      else if (viewtype == 2) {
        this.state.viewer.rotate(-90, -90, 0);
      }
      else if (viewtype == 3) {
        this.state.viewer.rotate(-90, 90, 0);
      }
      else if (viewtype == 4) {
        this.state.viewer.rotate(-90, 0, 0);
      }
      else if (viewtype == 5) {
        this.state.viewer.rotate(-90, 180, 0);
        this.state.viewer.setMouseUsage('pan');
        this.state.viewer.isTouchHeld = true;
        canvas.addEventListener("mouseup", function(event){
          this.state.viewer.setMouseUsage('default');
        });
      }
      else if (viewtype == 6) {
        this.state.viewer.suppressDraggingRotation = true;
        //this.state.viewer.replaceSceneFromUrl('jsc3d/models/fan.stl');
        this.state.viewer.rotate(-90, 0, 0);
        this.state.viewer.rotate(0, 25, 0);
        this.state.viewer.rotate(25, 0, 0);
      }
      this.state.viewer.update();
    }
  }

  render() {
    const style = {width: "100%", height: "100%"};

    return (
      <canvas
        style={style}
        ref={(canvas => this._canvas = canvas)}
      />
    );
  }
}
